<link href="/css/style.css" rel="stylesheet">
<link href="/css/style-responsive.css" rel="stylesheet">

<style>
    .EvenOrOddRow {
        background-color: expression((this.sectionRowIndex%2)?'white': '#E0E0E0');
    }
</style>

<body class="panel" style="padding: 0;">
<div class="row">
    <div class="col-sm-12">
        <div class="panel-body">
            <header class="panel-heading" style="height: 50px;">

                <div class="col-lg-8">APP 补丁数量概图</div>

            </header>
            <div class="row">
                <div class="col-md-12">
                    <ul class="goal-progress" id="patchSpeedBar">

                    </ul>
                </div>

            </div>
            <div class="row">
                <div class="col-md-12">
                    <!--		<div id="placeholder" style="height: 200px;"></div>-->
                </div>
            </div>

        </div>
    </div>
</div>
<!-- Placed js at the end of the document so the pages load faster -->
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.nicescroll.js"></script>
<script src="/js/scripts.js"></script>
<script src="/js/flot-chart/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/js/flot-chart/jquery.flot.selection.js"></script>
<script src="/js/html5shiv.js"></script>
<script src="/js/respond.min.js"></script>

<script>
    var totalCount = 0
    var currentPage = 1
    var step = 5
    var currentId = 0
    var tablebody
    var currentListData
    var adddata
    var host
    var userWithPirvilege
    var allUser = 1
    var maxcount
    //从API获取数据列表
    window.onload = function () {

        host = "http://" + window.location.host
        $.get(host + "/get_patch_speed", null, getPatchSpeedHandler, "json");
        getAccessSpeed(1);
        setInterval("getAccessSpeed(0)", 1000, 0);

    }

    function onBodyResize() {

//					var speedholder = document.getElementById("placeholder");
//					speedholder.style.width=window.innerWidth - 241 ; 
//					
//				setPlot(); 
//					update();
    }


    function getPatchSpeedHandler(response, status, xhr) {

        if (status == "success" && response.datalist != null) {
            currentListData = response.datalist
            maxcount = response.maxcount
            fillTable(currentListData, maxcount);
            parent.setMainContentHeight(currentListData.length, 63);
        } else {
            alert(response);
        }
    }

    function fillTable(appPatchSpeed, maxcount) {
        var patchOfAppHtml = "";
        for (var i = 0; i < appPatchSpeed.length; i++) {
            var currentPatchSpeed = appPatchSpeed[i];
            var speed = currentPatchSpeed.patch_count / maxcount
            patchOfAppHtml += ('<li>');
            patchOfAppHtml += ('  <div class="prog-avatar">');
            patchOfAppHtml += ('   <img src="/images/photos/user1.png" alt="">');
            patchOfAppHtml += ('  </div>');
            patchOfAppHtml += ('  <div class="details">');
            patchOfAppHtml += ('   <div class="title">');
            patchOfAppHtml += (currentPatchSpeed.bundle_id);
            patchOfAppHtml += ('  </div>');
            patchOfAppHtml += ('     <div class="progress progress-xs" >');
            patchOfAppHtml += ('   <div class="progress-bar ');
            if (speed < 0.33) {
                patchOfAppHtml += (' progress-bar-warning "');
            } else if (speed < 0.66) {
                patchOfAppHtml += (' progress-bar-info "');
            } else {
                patchOfAppHtml += (' progress-bar-success "');
            }
            patchOfAppHtml += ('   role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="' + maxcount + '" style="width: ' + (currentPatchSpeed.patch_count * 90 / maxcount) + '%"> ');
            patchOfAppHtml += ('        <span class="">' + currentPatchSpeed.patch_count + '</span>');
            patchOfAppHtml += ('           </div>');
            patchOfAppHtml += ('      </div>');
            patchOfAppHtml += ('    </div>');
            patchOfAppHtml += ('  </li> ');

        }
        tablebody = $("#patchSpeedBar");
        tablebody.empty();
        tablebody.append(patchOfAppHtml);

    }
    function getAccessSpeed(all) {
        host = "http://" + window.location.host;
        //	 	$.get(host + "/get_access_api_speed/" + all, null, getAccessSpeedHandler, "json");
    }

    //	getAccessSpeed(1);
    var fristDataList = new Array();
    var secondDataList = new Array();
    var totalPoints = 60 * 24;
    var thisMinute = 0;
    function getAccessSpeedHandler(response, status, xhr) {
        if (status == "success") {
            if (response == null) {
                //	setTimeout(getAccessSpeed, 1000, 1);
                return;
            }
            if (Object.keys(response).length == 1) {
                // 长度为1 代表是当前时间段的数据
                for (key in response) {
                    fristDataList[key] = [key, response[key]];
                    var nextX = parseInt(key) + 1;
                    fristDataList[nextX.toString()] = [nextX.toString(), 0];
                    thisMinute = key;
                }
            } else {
                //长度不为1 代表是所有的数据。
                for (var i = 0; i < totalPoints; i++) {
                    fristDataList[i] = [i, response[i]];
                }
            }

            setPlot();
            if (opts) {
                ppi = plot.width() / (opts.max - opts.min);
                nowtimeLine = o.left + (thisMinute - opts.min) * ppi;
            } else {
                ppi = plot.width() / totalPoints;
                nowtimeLine = o.left + (thisMinute - 0) * ppi;
            }

            console.log(ppi)

            update();
            //	setTimeout(getAccessSpeed, 1000, 0);
        } else {
            alert(response);
        }
    }
    var hour24button = " API 访问频率  &nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-success  btn-sm' onclick='resetSpeedView()'>24小时视图</a>";
    var plot;
    //	setPlot();
    function setPlot() {
        plot = $.plot("#placeholder", [{
            data: fristDataList,
            label: hour24button
        }], {
            series: {
                shadowSize: 0 // Drawing is faster without shadows
            },
            yaxis: {
                min: 0,
                max: 100,
                alignTicksWithAxis: 1,
                position: "left"
            },
            selection: {
                mode: "x"
            },
            xaxis: {
                min: 0,
                max: 24 * 60,
                show: true,
                tickDecimals: 0,
                ticks: [
                    [0, "0"],
                    [60, "1"],
                    [120, "2"],
                    [180, "3"],
                    [240, "4"],
                    [300, "5"],
                    [360, "6"],
                    [420, "7"],
                    [480, "8"],
                    [540, "9"],
                    [600, "10"],
                    [660, "11"],
                    [720, "12"],
                    [780, "13"],
                    [840, "14"],
                    [900, "15"],
                    [960, "16"],
                    [1020, "17"],
                    [1080, "18"],
                    [1140, "19"],
                    [1200, "20"],
                    [1260, "21"],
                    [1320, "22"],
                    [1380, "23"],
                    [1440, "24"]
                ]
            },
            legend: {
                position: "ne"
            },
            lines: {
                show: true,
                fill: true
            }
        });
    }

    var ppi;//   =  plot.width() / totalPoints;

    var nowtimeLine = 0;
    //var selectMin = 0;
    var speedholder = $("#placeholder");
    var opts;
    speedholder.bind("plotselected",
            function (event, ranges) {
                $.each(plot.getXAxes(), function (_, axis) {
                    opts = axis.options;
                    opts.min = ranges.xaxis.from;
                    opts.max = ranges.xaxis.to;
                    //	selectMin = opts.min;
                    ppi = plot.width() / (opts.max - opts.min);
                });

                plot.setupGrid();
                plot.draw();
                plot.clearSelection();

                drawLine();

            });

    function update() {
        plot.setData([{
            data: fristDataList,
            label: hour24button
        }]);
        plot.draw();
        o = plot.pointOffset({
            x: 0,
            y: 0
        });
        drawLine();
    }
    var o;
    // 画一条只是当前时间的线
    function drawLine() {
        var ctx = plot.getCanvas().getContext("2d");
        ctx.beginPath();
        ctx.moveTo(nowtimeLine, o.top);
        ctx.lineTo(nowtimeLine, o.top - plot.height());
        ctx.lineTo(nowtimeLine + 1, o.top - plot.height());
        ctx.lineTo(nowtimeLine + 1, o.top);
        ctx.lineTo(nowtimeLine, o.top);
        ctx.fillStyle = "#5cb85c";
        ctx.fill();
    }

    function resetSpeedView() {
        $.each(plot.getXAxes(), function (_, axis) {
            var opts = axis.options;
            opts.min = 0;
            opts.max = totalPoints;
            ppi = plot.width() / (opts.max - opts.min);
        });
        plot.setupGrid();
        plot.draw();
        plot.clearSelection();
        drawLine();
    }
</script>
</body>